<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>万东影院 | 经理</title>
  <link th:href="@{/images/logo.svg}" rel="icon" type="image/svg+xml">
  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/css/bootstrap-icons.min.css}" rel="stylesheet">
  <style>
    .description-text {
      width: 440px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 75px;
    }
  </style>
</head>
<body>
<header>
  <ul class="nav nav-tabs m-2">
    <li class="nav-item">
      <a class="nav-link disabled">
        <i class="bi bi-person-circle"></i>
        <span class="ms-1">经理</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" th:href="@{/manager/movies}">
        <i class="bi bi-film"></i>
        <span class="ms-1">电影列表</span>
      </a>
    </li>
    <li class="nav-item">
      <button class="nav-link"
              onclick="alert('请选择电影 > 右上角菜单 > 放映 以管理该电影的相关放映')">
        <i class="bi bi-camera-reels"></i>
        <span class="ms-1">放映管理</span>
      </button>
    </li>
    <li class="nav-item">
      <a class="nav-link">
        <i class="bi bi-graph-up"></i>
        <span class="ms-1">销售数据</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/manager/log}">
        <i class="bi bi-journals"></i>
        <span class="ms-1">操作日志</span>
      </a>
    </li>
    <li class="nav-item ms-auto">
      <a class="nav-link" th:href="@{/me}">
        <i class="bi bi-person-gear"></i>
        <span class="ms-1">账号管理</span>
      </a>
    </li>
  </ul>
</header>
<main class="container-fluid mt-4">
  <div class="container-fluid mt-3 mb-3">
    <form class="d-flex gap-2">
      <select class="form-select w-auto" th:value="${search}"
              name="search" aria-label="选择搜索的字段">
        <option value="title" th:selected="${search} == 'title'">电影名</option>
        <option value="id" th:selected="${search} == 'id'">电影 ID</option>
        <option value="director" th:selected="${search} == 'director'">导演</option>
        <option value="starring" th:selected="${search} == 'starring'">主演</option>
        <option value="description" th:selected="${description} == 'description'">简介</option>
      </select>
      <div class="input-group w-25">
        <input class="form-control" name="keyword" aria-label="搜索关键词"
               placeholder="搜索电影列表" th:value="${keyword}">
        <button type="submit" class="input-group-text">
          <i class="bi bi-search"></i>
        </button>
      </div>
      <a class="btn btn-primary" th:href="@{/manager/movies/add}">
        <i class="bi bi-plus-lg"></i>
        <span class="ms-1">添加电影</span>
      </a>
    </form>
  </div>
  <div class="d-flex flex-wrap">
    <div class="card m-3" style="min-width: 350px" th:each="movie : ${page.getContent()}">
      <div class="d-flex">
        <p class="h4 m-3" th:text="${movie.getTitle()}"></p>
        <div class="dropdown ms-auto">
          <button type="button" class="btn" data-bs-toggle="dropdown">
            <i class="bi bi-list"></i>
          </button>
          <ul class="dropdown-menu">
            <li><a class="btn dropdown-item px-3 py-2"
                   th:href="@{/manager/movies/{id}(id=${movie.getId()})}">
              <i class="bi bi-box-arrow-up-right"></i><span class="ms-3">查看</span>
            </a></li>
            <li><a class="btn dropdown-item px-3 py-2"
                   th:href="@{/manager/movies/{id}/edit(id=${movie.getId()})}">
              <i class="bi bi-pencil-square"></i><span class="ms-3">编辑</span>
            </a></li>
            <li><button class="btn dropdown-item px-3 py-2 delModalBtn"
                        th:data-movie-id="${movie.getId()}" type="button"
                        data-bs-toggle="modal" data-bs-target="#delModal">
              <i class="bi bi-trash"></i><span class="ms-3">删除</span>
            </button></li>
            <li><a class="btn dropdown-item px-3 py-2"
                   th:href="@{/manager/screenings(byMovieId=${movie.getId()})}">
              <i class="bi bi-camera-reels"></i><span class="ms-3">放映</span>
            </a></li>
          </ul>
        </div>
      </div>
      <div class="container-fluid d-grid border-bottom">
        <div class="row mt-1">
          <div class="col-2">导演</div>
          <div class="col-10" th:text="${movie.getDirector()}"></div>
        </div>
        <div class="row mt-1">
          <div class="col-2">主演</div>
          <div class="col-10" th:text="${movie.getStarring()}"></div>
        </div>
        <div class="row mt-1 mb-1">
          <div class="col-2">时长</div>
          <div class="col-10" th:text="${movie.displayRuntime()}"></div>
        </div>
      </div>
      <strong class="mx-3 my-2">剧情简介</strong>
      <div class="container-fluid">
        <div class="description-text" th:text="${movie.getDescription()}"></div>
      </div>
    </div>
  </div>
</main>
<footer>
  <div class="container-fluid clearfix">
    <div class="float-start">
      <span>共找到 <span th:text="${page.getTotalElements()}"></span> 部电影</span>
    </div>
    <div class="d-flex justify-content-center">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" th:if="${page.getNumber()} > 0"
             th:href="@{/manager/movies(page=${page.getNumber()}, search=${search}, keyword=${keyword})}"
          >上一页</a>
          <a class="nav-link disabled" th:if="${page.getNumber()} == 0">上一页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">
            当前 <span th:text="${page.getNumber() + 1}"></span>页
            / 总共 <span th:text="${page.getTotalPages()}"></span> 页
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link"
             th:if="${page.getNumber()} < ${page.getTotalPages() - 1}"
             th:href="@{/manager/movies(page=${page.getNumber() + 2}, search=${search}, keyword=${keyword})}"
          >下一页</a>
          <a class="nav-link disabled"
             th:if="${page.getNumber()} == ${page.getTotalPages() - 1}">下一页</a>
        </li>
      </ul>
    </div>
    <input type="hidden" th:value="${page.getNumber() + 1}" id="currentPage">
  </div>
</footer>
<div>
  <div class="modal fade" id="delModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">确认此操作</div>
        </div>
        <div class="modal-body">
          <div class="container-fluid p-3">
            是否要删除该电影
          </div>
          <div class="container-fluid">
            <div class="alert alert-danger w-100">
              <i class="bi bi-exclamation-triangle-fill"></i>
              <span class="ms-1">注意：此操作不可逆</span>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary me-1"
                  data-bs-dismiss="modal" type="button">取消</button>
          <button class="btn btn-danger" id="delBtn" data-bs-dismiss="modal"
                  type="button" data-movie-id="0">确认</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script th:src="@{/js/axios.min.js}"></script>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script>
const delBtn = document.getElementById('delBtn');

async function deleteMovie(id) {
  try {
    const response = await axios.delete(`/api/movies/${id}`);
    if (response.status === 200) {
      alert("已删除该电影");
      location.reload();
    } else {
      console.log(response);
    }
  } catch (error) {
    if (error.response.status === 409) {
      alert(error.response.data);
    } else {
      console.log(error)
    }
  }
}

document.querySelectorAll(".delModalBtn").forEach((el) => {
  el.addEventListener('click', () => {
    const dataset = el.dataset;
    delBtn.dataset.movieId = dataset.movieId;
  });
});

delBtn.addEventListener('click', event => {
  event.preventDefault();
  deleteMovie(delBtn.dataset.movieId);
});

</script>
</body>
</html>